/* Standard-Styling für die Buttons */
.button1,
.btn-default,
.action-button-forprofile,
.ms-CommandBarItem-link, 
.ms-Button.ms-Button--primary.root-293, 
.ms-Button.ms-Button--primary.root-298, 
.ms-Button.ms-Button--default.root-170:not(.ms-Button--hasMenu) { 
    background: #f19720 !important; /* Standard orange */
    border: 1px solid #f19720 !important; /* Orange Rahmen */
    color: #FFFFFF !important; /* Weiße Schrift */
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    position: relative;
    overflow: hidden; /* Wichtig für die Animation */
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background 0.3s ease-in-out;
    z-index: 1; /* Stellt sicher, dass der Text über dem Hintergrund bleibt */
}

/* Ausnahme für .button1: Zusätzlicher weißer Rand */
.button1 {
    border: 1px solid white !important; /* Zusätzlicher weißer Rahmen */
}

/* Pseudo-Element für den animierten Hintergrund */
.button1::before,
.btn-default::before,
.action-button-forprofile::before,
.ms-CommandBarItem-link::before, 
.ms-Button.ms-Button--primary.root-293::before, 
.ms-Button.ms-Button--primary.root-298::before, 
.ms-Button.ms-Button--default.root-170:not(.ms-Button--hasMenu)::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: black;
    transition: height 0.3s ease-in-out;
    z-index: -1; /* Hintergrund bleibt hinter dem Text */
}

/* Hover-Effekt */
.button1:hover,
.btn-default:hover,
.action-button-forprofile:hover
.ms-CommandBarItem-link:hover, 
.ms-Button.ms-Button--primary.root-293:hover, 
.ms-Button.ms-Button--primary.root-298:hover, 
.ms-Button.ms-Button--default.root-170:not(.ms-Button--hasMenu):hover {
    color: #ffffff !important; /* Schrift bleibt weiß */
    border-color: black !important; /* Rahmen wird schwarz */
}

/* Animation des Hintergrunds beim Hover */
.button1:hover:hover::before,
.btn-default:hover::before,
.action-button-forprofile:hover::before,
.ms-CommandBarItem-link:hover::before, 
.ms-Button.ms-Button--primary.root-293:hover::before, 
.ms-Button.ms-Button--primary.root-298:hover::before, 
.ms-Button.ms-Button--default.root-170:not(.ms-Button--hasMenu):hover::before {
    height: 100%; /* Füllt den Button von unten nach oben aus */
}

/* Standard-Styling für den Button */
.ms-Button.ms-Button--icon.ms-Button--hasMenu {
    background: transparent !important; /* Kein Hintergrund */
    border: 1px solid #f19720 !important; /* Dünne orangene Umrandung */
    color: #f19720 !important; /* Drei Punkte in Orange */
    width: 24px; /* Etwas kleinere Größe */
    height: 24px;
    border-radius: 50%; /* Macht den Button rund */
    display: inline-flex; /* Behält Inline-Flow bei */
    align-items: center;
    justify-content: center;
    vertical-align: middle; /* Verhindert größere Zeilenhöhe */
    padding: 0; /* Entfernt zusätzliches Padding */
    margin: 0; /* Keine zusätzliche Höhe */
    outline: none !important; /* Entfernt den blauen Fokus-Ring */
}


.ms-Button.ms-Button--icon.ms-Button--hasMenu:active,
.ms-Button.ms-Button--icon.ms-Button--hasMenu:focus,
.ms-Button.ms-Button--icon.ms-Button--hasMenu[aria-expanded="true"] {
    background: transparent !important; /* Kein grauer Hintergrund */
    border: 1px solid #f19720 !important; /* Orange Umrandung bleibt */
    color: #f19720 !important; /* Icon bleibt orange */
}

/* Stellt sicher, dass das Icon immer orange bleibt */
.ms-Button.ms-Button--icon.ms-Button--hasMenu i {
    font-size: 12px;
    color: #f19720 !important;
}

/* Standard-Styling für den Button */
.submit-btn, .btn.btn-primary, .btn-secondary{
    background: #f19720 !important; /* Standard orange */
    border: 1px solid #f19720 !important;
    color: #FFFFFF !important;
    padding: 10px 10px !important;;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
    height: 50px;
}



/* Hover-Effekt: Der Button füllt sich schwarz von unten nach oben */
.submit-btn:hover, .btn.btn-primary:hover, .btn-secondary:hover{
    color: #ffffff !important; /* Schrift bleibt weiß */
    border-color: black !important;
    box-shadow: inset 0 -100px 0 0 black; /* Jetzt direkt tiefschwarz */
}